import Image from 'next/image'

type T = {
  title: string
  desc: string | Array<string>
  intros: { title: string; desc: string; img: any }[]
}
export default function Intro(props: T) {
  const { title, desc, intros } = props
  return (
    <div className="flex flex-col gap-10 py-row max-sm:py-sRow">
      <div className="flex flex-col gap-3">
        <h2 className="leading-tight text-secondTitle font-bold text-black text-center">
          {title}
        </h2>
        {Array.isArray(desc) ? (
          desc.map((item) => (
            <div key={item} className="text-desc text-menuTxt text-center">
              {item}
            </div>
          ))
        ) : (
          <div className="text-desc text-menuTxt text-center">{desc}</div>
        )}
      </div>
      <div className="grid grid-cols-3 justify-center gap-3 max-sm:flex-col max-sm:items-center max-sm:grid-cols-1">
        {intros?.map((item, index) => (
          <div
            key={index}
            className="flex flex-col items-center gap-3 p-4 bg-white w-[285px] min-h-[317px] rounded-[30px] max-sm:w-full max-sm:min-h-[270px]"
          >
            <div className="w-[90px] h-[90px]">
              <Image src={item.img} alt="intro image" />
            </div>
            <div className="text-center font-medium text-menuTxt">
              {item.title}
            </div>
            <div className="text-center font-normal text-menuTxt text-sDesc">
              {item.desc}
            </div>
          </div>
        ))}
      </div>
    </div>
  )
}
